<template>
  <div class="svg" :style="selected ? { background: '#409EFF' } : {}">
    <svg-icon :name="name" :myStyle="myStyle"></svg-icon>
    <div v-if="title" style="line-height: normal">
      <span style="font-size: 14px">
        {{ title }}
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    name: {},
    myStyle: {
      type: Object,
      defalt: {},
    },
    title: {},
    selected: {
      type: Boolean,
      default: false,
    },
  },
});
</script>

<style lang="scss" scoped>
.svg {
  padding: 2px;
  text-align: center;
  color: #fff;
  font-weight: bolder;

  &.active {
    background: #409eff;
  }
}
.svg:hover {
  background: #409eff;
  cursor: pointer;
}
</style>